<template>
  <!-- <a-modal :title="title + '用户'" :closable="false" :keyboard="false" :visible="visible" :confirmLoading="confirmLoading"> -->
  <a-modal
    :title="title + '用户'"
    :width="420"
    @close="cancel"
    :visible="visible"
    :wrapStyle="{overflow: 'auto',paddingBottom: '108px'}"
     @ok="addAction"
      @cancel="cancel"
  >
  
    <a-form :form="form">
        <a-form-item label="公告类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
       <a-select
          placeholder="请选择公告类型"
          :allowClear="true"
          showSearch
          mode="multiple"
          :filterOption="filterOption"
          @change="roleChange"
          v-decorator="['role', { rules: [{required:true, message: '请选择公告类型'}] }]"
        >
          <a-select-option
            v-for="item of rolesList"
            :key="item.id"
            :value="item.id+','+item.name"
          >{{ item.name }}</a-select-option>
        </a-select>
          </a-form-item>
      <a-form-item label="标题" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          placeholder="请输入标题"
          @change="nameChange"
          v-decorator="['user', { rules: [{required:true, message: '请输入标题'}] }]"
        ></a-input>
      </a-form-item>
   
      <a-form-item label="公告对象" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-select
          placeholder="请选择公告对象"
          :allowClear="true"
          showSearch
          mode="multiple"
          :filterOption="filterOption"
          @change="roleChange"
          v-decorator="['role', { rules: [{required:true, message: '请选择公告对象'}] }]"
        >
          <a-select-option
            v-for="item of rolesList"
            :key="item.id"
            :value="item.id+','+item.name"
          >{{ item.name }}</a-select-option>
        </a-select>
        <!-- <p>379318615609344</p> -->
        <!-- <a-select placeholder="请选择角色" :allowClear="true" showSearch :filterOption="filterOption" @change="roleChange" class="suppierSearch" v-decorator="['role',{ initialValue: roleIdMock, rules: [{ required: true, message: '请选择角色' }] }]">
                    <a-select-option v-for="item of rolesList" :key="item.id" :value="item.id ">{{ item.name }}</a-select-option>
                  </a-select> -->
        <!-- <p>{{ rolesList[0].id }}</p> -->
      </a-form-item>
     
      
      <!-- <a-form-item v-if="!userId" label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          placeholder="请输入密码"
          @change="pwdChange"
          v-decorator="['password', { rules: [{required:true, message: '请输入密码'}] }]"
        ></a-input>
      </a-form-item> -->
    </a-form>
    <!-- <template slot="footer"> -->
    <!-- <div :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }"> -->
      <!-- <a-button type="primary" class="marginBtn" :loading="confirmLoading" @click="addAction">{{ title }}</a-button>
      <a-button class="marginBtn" :loading="confirmLoading" @click="cancel">取消</a-button> -->
    <!-- </div> -->
    <!-- </template> -->
    <!-- </a-modal> -->
  </a-modal>
</template>

<script>
import { preventMoreClick } from "../../../utils/filter";
import * as API from "../../../api/user";

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      postUserData: {
        username: "",
        phone: "",
        nickName: "",
        // password: "",
        roles: [],
        roleId: undefined
      },
      // rolesList: []
    };
  },
  props: {
    visible: {
      type: Boolean,
      detail: false
    },
    title: {
      type: String,
      detail: ""
    },
    confirmLoading: {
      type: Boolean,
      detail: false
    },
    userId: {
      type: Number,
      detail: null
    },
    rolesList: {
      type: Array,
      detail: []
    },
  },
  mounted() {
    // this.getRolesList();
  },
  methods: {
    // getRolesList() {
    //   API.getRoles().then(res => {
    //     if (res.code === 200) {
    //       this.rolesList = res.data;
    //       // console.log(this.rolesList)
    //     }
    //   });
    // },
    getusersDetailList (userId) {
      this.postUserData = {
          username: "",
          phone: "",
          nickName: "",
          // password: "",
          roles: [],
          roleId: undefined
        }
      if (userId) {
        API.getUserDetail(userId).then(res => {
          if (res.code === 200) {
            // console.log(res.data)
            // debugger
            this.postUserData = res.data
            let roleId = res.data.role ? res.data.role.id : undefined;
            this.$set(this.postUserData, 'roleId', roleId)
            // this.$set(this.postUserData, 'roles', roles)
            this.setFields(this.postUserData)
          }
        });
      } else {
        this.setFields(this.postUserData)
      }
    },
    setFields (postUserData) { // form 回写
      this.form.setFieldsValue({
        user: postUserData.username || undefined,
        phone: postUserData.phone || undefined,
        nickName: postUserData.nickName || undefined,
        role: postUserData.roles.map(item => item.id+','+item.name),
        // role: postUserData.role ? postUserData.role.id : undefined,
        // password: postUserData.password
      });
    },
    addAction() {
      this.form.validateFields(err => {
        if (!err) {
          preventMoreClick(this, () => {
            // 防重复点击
            this.$emit("addAction", this.postUserData);
          });
        }
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    cancel() {
      this.$emit("addCancel");
    },
    nameChange(e) {
      this.postUserData.username = e.target.value;
    },
    phoneChange(e) {
      this.postUserData.phone = e.target.value;
    },
    nickNameChange(e) {
      this.postUserData.nickName = e.target.value;
    },
    // pwdChange(e) {
    //   this.postUserData.password = e.target.value;
    // },
    roleChange(value) {
      console.log(value,5555)
      this.postUserData.roleId = value;
      this.postUserData.roles = []
      value.forEach(item => {
        let arr = item.split(',')
        this.postUserData.roles.push({ "id": arr[0], "name": arr[1] })
      })
      // this.roles.push
    }
  },
  watch: {
    userId: function(newVal) {
      if (newVal !== undefined) {
        this.getusersDetailList(newVal)
      }
    }
  }
};
</script>